//@import "../../style/slagCar/pubLayout";

.g-main{
  height: 0;
  display: flex;
  flex-direction: column;
  >.tab_wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 64rpx;
    background: #ffffff;

    >.tab {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: gray;

      &.active {
        color: #01C257;
      }
    }

    >.bar {
      position: absolute;
      left: 25%;
      bottom: 0;
      transform: translateX(-50%);
      transition: all 0.3s;
      width: 3em;
      height: 6rpx;
      background: #01C257;

      &.half {
        left: 75%;
      }
    }
  }

  >.content-wrap{
    height: 0;
    flex: 1;
    overflow: hidden;
    .tab_content {
      display: flex;
      height: 100%;
      width: 200%;
      overflow-y: auto;
      transition: all 0.3s;
      transform: translateX(0%);

      &.half {
        transform: translateX(-50%);
      }

      >.content_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;

        > .filter-wrap{
          display: flex;
          justify-content: space-around;
          background: #ffffff;
          padding: 20rpx 0;
          > .filter-btn{
            padding: 10rpx 20rpx;
            border: 1px solid #e6e6e6;
            background: #ffffff;
            width: 16%;
            text-align: center;
            border-radius: 8rpx;
            &.active{
              color: #01C257;
              border-color: #01C257;
            }
          }
        }

        > .total-wrap{
          padding: 10rpx;
          background: #ffffff;
          margin: 20rpx 0;
          font-size: 32rpx;
          display: flex;
          justify-content: space-between;
        }

        > .count-wrap{
          display: flex;
          margin: 20rpx;
          justify-content: center;
          background: #FFFFFF;
          .count-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 200rpx;
            padding: 20rpx 0;
            flex: 1;
            & + .count-item{
              border-left: 1px solid #e6e6e6;
            }
            .price{
              font-weight: bold;
              font-size: 40rpx;
            }
            .name{
              color: #999999;
            }
          }
        }

        > .list-wrap{
          flex: 1;
          height: 0;
          overflow: auto;
          background: #ffffff;

          .li-wrap{
            border-bottom: 1px solid #e6e6e6;
            padding: 20rpx 0 20rpx 20rpx;
            display: flex;
            align-items: center;
            .li{
              flex: 1;
              width: 0;
              &.redColor{
                color: #ff0000;
              }
            }
            .title{
              font-size: 34rpx;
            }
            .content{
              display: flex;
              .start,.end{
                width: 36%;
              }
              .center{
                width: 20%;
                padding: 0 10rpx;
                .arrow{
                  font-size: 50rpx;
                  color: #11c363;
                }
              }

              .time{
                color: #ff9841;
              }
              .name{
                font-size: 32rpx;
                width: 100%;
              }
              .address{
                font-size: 28rpx;
                color: #999999;
              }
            }
          }
        }

        > .query-wrap{
          display: flex;
          align-items: center;
          padding: 20rpx;
          background: #ffffff;
          .ipt{
            border: 1px solid #e6e6e6;
            background: #ffffff;
            width: 38%;
            text-align: center;
            border-radius: 8rpx;
            height: 64rpx;
            > input{
              height: 100%;
            }
          }
          .btn{
            color: #ffffff;
            background: #01C257;
            width: 100rpx;
            border-radius: 8rpx;
            text-align: center;
            height: 60rpx;
            line-height: 60rpx;
            margin-left: 20rpx;
            &:active{
              background: rgba(1, 194, 87, 0.71);
            }
          }
        }

        .collapse-content{
          padding: 0;
        }
        .collapse-content-item{
          padding: 20rpx 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
